<template>
  <div class="add-actionSheet-container">
    <van-action-sheet v-model="show" @open="open" @close="close">
      <div class="add-actionSheet">
        <div class="add-actionSheet-top" @click="clickTop">
          <van-icon name="arrow-down"/>
        </div>
        <div class="add-actionSheet-header">
          <div class="add-actionSheet-header-left">我想@谁</div>
          <div class="add-actionSheet-header-right">最多添加5人</div>
        </div>
        <div class="add-actionSheet-mian">
          <div class="add-actionSheet-mian-personnel" v-for="(item,index) in users" :key="index">
            <div class="add-actionSheet-mian-personnel-left">{{ item.name }}</div>
            <div class="add-actionSheet-mian-personnel-right" @click="clickDel(item)">
              <img :src="del" class="add-actionSheet-mian-personnel-right-img">
            </div>
          </div>
        <div class="add-actionSheet-mian-item" @click="addUser()" v-if="users.length < 5">+ 添加</div>
        </div>
        <div class="add-actionSheet-guess" v-if="meShow">
          <div class="add-actionSheet-guess-left"></div>
          <div class="add-actionSheet-guess-right">猜你想@</div>
        </div>
        <div class="add-actionSheet-guessPeople">
        <div class="add-actionSheet-guessPeople-item" @click="thinkClick(item)" :class="{'add-actionSheet-guessPeople-active' : item.selected }" v-for="(item,index) in people" :key="index">
         {{item.name}}
        </div>
      </div>
        <div class="add-actionSheet-content">
          <van-field
            v-model="eventContent"
            rows="4"
            autosize
            type="textarea"
            maxlength="50"
            :left-icon="bianji"
            :placeholder="info"
          />
        </div>
        <div class="add-actionSheet-footer">
          <div class="add-actionSheet-footer-btnLeft" @click="clickClose">取消</div>
          <div class="add-actionSheet-footer-btnRight" @click="cilckSend">确定</div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import Vue from 'vue'
import { ActionSheet, Toast } from 'vant'
import _, { isEmpty } from 'lodash'
import bianji from '../assets/images/bianji.png'
import del from '../assets/images/del.png'
import { queryForward } from '../api/home'
Vue.use(ActionSheet)
Vue.use(Toast)
export default {
  name: 'AddActionSheet',
  props: {
    users: {
      type: Array,
      default() {
        return []
      }
    },
    query: {
      type: Object,
      default() {
        return {}
      }
    },
    listName: {
      type: String,
      default() {
        return ''
      }
    }
  },
  watch: {
    show(a, b) {
      if (!a) {
        this.clickClose()
      } else {
        this.getThinkClickList()
      }
    }
  },
  mounted() {
    this.eventContent = this.$xss(this.eventContent)
  },
  computed: {
    info() {
      return `@他的同时，你想说点什么…例如:我正在关注${this.query.indexName || '其他'}数据`
    },
    meShow() {
      if (isEmpty(this.people)) {
        return false
      } else {
        return true
      }
    }
  },
  data() {
    return {
      del,
      bianji,
      show: false,
      selectedUsers: [],
      sendUsers: [],
      eventContent: '',
      people: []
    }
  },
  methods: {
    open() {
      this.show = true
    },
    close() {
      this.show = false
    },
    clickClose() {
      this.close()
      this.$parent.users = []
      this.eventContent = ''
    },
    addUser() {
      this.$parent.testddAdd()
    },
    clickTop() {
      this.close()
    },
    cilckSend() {
      if (isEmpty(this.users)) {
        Toast.fail('请添加我想@的人员')
        return
      }
      this.$parent.handleTrackButton(this.eventContent)
      this.eventContent = ''
    },
    // 删除
    clickDel(item) {
      const arr = this.users.filter(v => v.emplId !== item.emplId)
      this.$parent.users = arr
      const actionsUser = this.people.find(p => p.emplId === item.emplId)
      if (actionsUser) {
        actionsUser.selected = false
      }
    },
    // 添加
    thinkClick(item) {
      const findUser = this.users.find(user => user.emplId === item.emplId)
      if (!findUser) {
        if (this.users.length >= 5) {
          this.$toast('最多选择5人')
        } else {
          item.selected = true
          this.users.push(item)
        }
      }
    },
    async getThinkClickList() {
      const res = await queryForward({
        traceId: this.query.traceId
      })
      if (res.success) {
        const actionUsers = res.value || []
        actionUsers.forEach(user => {
          user.emplId = user.userId
        })
        if (this.listName === 'forwardList' && actionUsers.length > 0) {
          actionUsers[0].selected = true
          this.users.push(_.cloneDeep(actionUsers[0]))
        }
        this.people = actionUsers
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.add-actionSheet {
  background-color: #393F52;
  padding: 20px;

  &-top {
    text-align: center;
    margin-top: -10px;
  }

  &-header {
    display: flex;

    &-left {
      font-size: 18px;
      color: #fff;
      padding-right: 10px;
    }

    &-right {
      font-size: 12px;
      color: #727687;
      padding-top: 5px;
    }
  }

  &-mian {
    padding-top: 12px;
    display: flex;
    flex-wrap: wrap;
   &-personnel {
      height: 0.85333rem;;
      margin-right: 10px;
      display: flex;
      background-color: #0A82FA;
      color: #fff;
      margin-bottom: 8px;
      padding-bottom: 6px;
      &-left {
        font-size: 14px;
        padding-left: 10px;
        padding-top: 5px;
      }
      &-right {
        font-size: 14px;
        padding-top: 8.5px;
        padding-left: 5px;
        padding-right: 14px;
        &-img {
          width: 12px;
          height: 12px;
        }
      }
    }

    &-item {
      width: 80px;
      height: 32px;
      background-color: #0A82FA;
      color: #fff;
      font-size: 14px;
      text-align: center;
      line-height: 32px;
    }
  }

  &-guess{
    margin-top: 20px;
    display: flex;
    &-left{
      width: 4px;
      height: 13px;
      background-color: #0A82FA;
      margin-top: 4px;
    }
    &-right{
     font-size: 16px;
     color: #FFFFFF;
     padding-left: 5px;
    }
  }

  &-guessPeople{
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    &-item{
      margin-top: 8px;
      width: 62px;
      height: 30px;
      background-color: rgba(255,255,255,0.08);
      color: #BEBEC5;
      text-align: center;
      line-height: 30px;
      border-radius: 15px;
      margin-right: 8px;
    }
    &-active{
      margin-top: 8px;
      width: 62px;
      height: 30px;
      background-color: #0A82FA;
      color: #FFFFFF;
      text-align: center;
      line-height: 30px;
      border-radius: 15px;
      margin-right: 8px;
    }
  }
  &-content {
    padding-top: 20px;
  }

  &-footer {
    padding-top: 20px;
    display: flex;

    &-btnLeft {
      width: 160px;
      height: 44px;
      background-color: rgba(255,255,255,0.08);
      color: #FFFFFF;
      text-align: center;
      line-height: 44px;
      margin-right: 20px;
      font-size: 16px;
    }

    &-btnRight {
      width: 160px;
      height: 44px;
      background-color: #0A82FA;
      color: #fff;
      text-align: center;
      line-height: 44px;
      font-size: 16px;
    }
  }
}
.add-actionSheet-container /deep/.van-icon-arrow-down {
  color: #fff;
  font-size: 20px;
}

.add-actionSheet-container /deep/.van-popup {
  background-color: #393F52;
}

.add-actionSheet-container /deep/.van-field {
  background-color: #393F52;
  border: 1px solid #5A5D66;
  border-radius: 5px;
}
.add-actionSheet-container /deep/.van-field__control {
  color: #fff;
}
.add-actionSheet-container /deep/.van-cell__value{
  font-size: 16px;
}
.add-actionSheet-container /deep/.van-icon__image{
  margin-left: -7px;
}
</style>
